@import models.Tables.ProjectRow
@(project: Seq[ProjectRow], projectname: Seq[String],host:String)(implicit session: Session)
@background.main("管理项目")(projectname,host) {

    <style>

            .instr{
                float:left;
                word-wrap:break-word;
                position: relative;
                line-height: 20px;
                max-height: 80px;
                overflow: hidden;
                width:150px;
            }

            .borders {
                width: 300px;
                height: 250px;
                border: 1px solid #333333;
                border-radius: 10px 10px 10px 10px;
                margin: 50px 50px 50px 50px;
                float: left;
            }

            .header {
                width: 200px;
                height: 45px;
                border-radius: 15px 15px 15px 15px;
                margin: 50px 50px 50px 50px;
                font-size: 30px;
                background-color: transparent;
                color: #333333;
                border: 0px;

            }

            .header:hover {
                border: 1px solid #EAECEE;
                background-color: lightgrey;
            }

            .delete {
                background-color: white;
                border: 0px;
                font-size: 15px;
                float: right;
                margin-right: 10px;
                margin-top: -10px;
                color: lightgrey;
            }

            .delete:hover {
                border: solid 1px;
                border-color: lightgrey;
                border-radius: 5px 5px 5px 5px;
                color: red;
            }

            .revamp {
                background-color: white;
                border: 0px;
                font-size: 15px;
                float: right;
                margin-right: 10px;
                margin-top: -10px;
                color: #333333;
            }

            .revamp:hover {
                border: solid 1px;
                border-color: #333333;
                border-radius: 5px 5px 5px 5px;
            }

        .modal{
            z-index:150;
        }

        .modal-backdrop{
            z-index:140;
        }

    </style>

    <div class="page-content-wrapper">

        <div class="page-content">

            <div class="row-fluid">

                <div class="row">
                    <div class="col-md-12 col-sm-12">

                        <button class="header" onclick="insertGroup()" >
                            <i class="fa fa-plus"></i>新建项目
                        </button>

                        <div style="margin-left: 50px;">

                        @for(p <- project) {
                            <div class="borders">
                                <div style="margin-left: 2em;">
                                    <input class="@p.id" value="@p.description" style="display: none">

                                    <button class="revamp" onclick="openDelete(this)" value="@p.projectname" id="@p.id" title="删除项目">
                                        <i class="fa fa-trash"></i>
                                    </button>

                                    <button class="revamp" onclick="updateProname(this)"  title="编辑项目信息" value="@p.projectname" id="@p.id">
                                        <i class="fa fa-pencil"></i>
                                    </button>

                                    <h3><a href='@routes.SampleController.enterHome(p.projectname)'>@p.projectname</a></h3>
                                    <div style="margin-top: 20px;">样品数量：@p.samcount</div>

                                    <div style="margin-top: 20px;">创建日期：@p.createdata.toLocalDate</div>
                                    <div style="margin-top: 20px;">
                                        <p style="float: left">项目描述：</p>
                                        <p title="@p.description" class="instr">@p.description</p>
                                    </div>
                                </div>
                            </div>
                        }

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div id="addModal" class="modal fade modal-margin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width: 600px;">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">
                        <i class="fa fa-plus"></i>
                        <span id="lblAddTitle" style="font-weight: bold">新建项目：</span>
                    </h4>
                </div>
                <form id="form" data-toggle="validator">
                    <div class="modal-body">
                        <div class="row-fluid">

                            <div class="row">
                                <div class="col-sm-8">
                                    <div class="form-group">
                                        <label class="control-label">
                                            项目名称: </label>
                                        <input class="form-control" name="projectname" id="projectname" >
                                    </div>
                                </div>
                            </div>

                            <div id="groupContent">
                                <div class='row'>
                                    <div class="col-sm-10">
                                        <div class='form-group'>
                                            <label class='control-label'>项目描述：</label>
                                            <textarea class='form-control' style="border-radius: 4px" rows="6"
                                            name='description' id='description' required='required'></textarea>
                                        </div>
                                    </div>
                                </div></div>

                        </div>
                    </div>
                    <div class="modal-footer bg-info">
                        <button type="submit" class="btn blue" onclick="addProject()">确定</button>
                        <button type="button" class="btn green" data-dismiss="modal">取消</button>
                    </div>
                </form>

            </div>
        </div>
    </div>

    <div id="updateProname" class="modal fade modal-margin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width: 600px;">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">
                        <i class="fa fa-pencil"></i>
                        <span id="lblAddTitle" style="font-weight: bold">编辑项目信息：</span>
                    </h4>
                </div>
                <form id="updateproForm" data-toggle="validator">
                    <div class="modal-body">
                        <div class="row-fluid">

                            <div class="row">

                                <div class="col-sm-8" style="display: none;">
                                    <div class="form-group">
                                        <label class="control-label">
                                            项目ID：
                                        </label>
                                        <input class="form-control indent" id="proId" name="proId" readonly="readonly" >
                                    </div>
                                </div>

                                <div class="col-sm-8">
                                    <div class="form-group">
                                        <label class="control-label">
                                            项目名：
                                        </label>
                                        <input class="form-control indent" id="proname" name="proname">
                                    </div>
                                </div>

                                <div class="col-sm-8">
                                    <div class="form-group">
                                        <label class="control-label">
                                            项目描述：
                                        </label>
                                        <textarea class='form-control indent' style="border-radius: 4px" rows="4"
                                        name='description1' id='description1'></textarea>
                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>
                    <div class="modal-footer bg-info">
                        <button type="button" class="btn blue" onclick="updateP()">确定</button>
                        <button type="button" class="btn green" data-dismiss="modal">取消</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div id="deleteShow" class="modal fade modal-margin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top: 200px;">
        <div class="modal-dialog" style="width: 400px;">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h4 class="modal-title" align="center" id="title1">
                        <span style="font-weight: bold">请确认是否删除项目"
                            <b id="dsample">

                            </b>"?
                        </span>
                    </h4>
                    <h4 class="modal-title" align="center" id="title2" style="display: none;">
                        <span style="font-weight: bold;">删除中...</span>
                    </h4>
                    <h4 class="modal-title" align="center" id="title3" style="display: none;">
                        <span style="font-weight: bold;">删除成功</span>
                    </h4>
                </div>
                <div class="row-fluid" align="center" >
                    <div id="warn1">
                        <img src="/assets/images/warning.png">
                    </div>
                    <div id="warn2" style="display: none;">
                        <img src="/assets/images/timg2.gif" style="height: 109px;">
                    </div>
                    <div id="warn3" style="display: none;">
                        <img src="/assets/images/success.png">
                    </div>
                </div>
                <div class="modal-footer bg-info">
                    <div align="center">
                        <button type="button" class="btn red" onclick="deleteSample(this)" style="width: 100px;" id="btn1">确定</button>
                        <button type="button" class="btn green" data-dismiss="modal" style="width: 100px;" id="btn2">取消</button>
                        <button type="button" class="btn green" onclick="updateDelete()" style="width: 100px;display: none;" id="btn3">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>

            $(function () {
                formValidation();
            });

            function insertGroup() {
                $("#addModal").modal("show")
            }

            function updateProname(obj) {
                var v = obj.value;
                var id = obj.id;
                var n = $("." + id).val();
                $("#proname").empty();
                $("#proname").val(v);
                $("#proId").val(id);
                $("#description1").empty();
                $("#description1").val(n);
                $("#updateProname").modal("show")
            }

            function updateDes(obj) {
                var name = obj.value;
                var id = obj.id;
                console.log(name);
                $("#description1").empty();
                $("#description1").val(name);
                $("#proId2").val(id);
                $("#updateDescription").modal("show")
            }

            function formValidation() {
                $('#form').formValidation({
                    framework: 'bootstrap',
                    icon: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        projectname: {
                            validators: {
                                notEmpty: {
                                    message: '项目名不能为空!'
                                },
                                remote: {
                                    type: 'POST',
                                    url: '/project/checkProjectname',
                                    message: '项目名重复，请重新输入！'
                                },
                                regexp: {
                                    regexp: '^[A-Za-z0-9"_"]{1,12}$',
                                    message: '12个以内字符，可使用字母、数字、下划线！'
                                }
                            }
                        }
                    }
                });
                $('#updateproForm').formValidation({
                    framework: 'bootstrap',
                    icon: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        proname: {
                            validators: {
                                notEmpty: {
                                    message: '项目名不能为空!'
                                },
                                regexp: {
                                    regexp: '^[A-Za-z0-9"_"]{1,12}$',
                                    message: '12个以内字符，可使用字母、数字、下划线！'
                                },
                                remote: {
                                    type: 'POST',
                                    url: '/project/checkNewproname',
                                    message: '项目名重复，请重新输入！'
                                }
                            }
                        }
                    }
                })
            }

            function addProject() {
                var form = $("#form")
                var fv = form.data("formValidation")
                fv.validate()
                if (fv.isValid()) {
                    $.ajax({
                        url: "@routes.ProjectController.addProject()",
                        type: "get",
                        data: $("#form").serialize(),
                        success: function (data) {
                            if (data.valid == "true") {
                                $("#addModal").modal("hide")
                                cpm("home","新建成功");
                            }
                        }
                    });
                }

            }

            function openDelete(obj) {
                var i = obj.id;
                var name = obj.value;
                $("#dsample").empty();
                $("#dsample").append(name);
                $("#btn1").val(i);
                $("#deleteShow").modal("show");

            }

            function deleteSample(obj) {
                var id = obj.value;
                deleting();
                $.ajax({
                    url: "/project/deleteProject?id=" + id,
                    type: "delete",
                    dataType: "json",
                    success: function (data) {
                        if (data.valid == "true") {
                            deleteAfter();
                        }
                    }
                });
            }

            function updateDelete() {
                $("#deleteShow").modal("hide");
                location.reload();
            }

            function updateP() {
                $.ajax({
                    url: "@routes.ProjectController.updateProname()",
                    type: "post",
                    dataType: "json",
                    data: $("#updateproForm").serialize(),
                    success: function (data) {
                        if (data.valid == "true") {
                            $("#updateProname").modal("hide")
                            cpm("home","修改成功");
                        }
                    }
                })
            }

            function updateD() {
                $.ajax({
                    url: "@routes.ProjectController.updateDescription()",
                    type: "post",
                    dataType: "json",
                    data: $("#updateDesForm").serialize(),
                    success: function (data) {
                        if (data.valid == "true") {
                            $("#updateDescription").modal("hide")
                            cpm("home","修改成功");
                        }
                    }
                })
            }

    </script>


}
